<template>
  <!-- 版块详情 -->
  <div class="module-detail-page">
    <div class="tool-bar">
      <div class="menu-list">
        <span class="menu-item">{{moduleInfo.plateName}}</span>
        <span class="menu-item"><i @click="addOrEditPlate(moduleInfo.id)" class="el-icon-setting" style="font-weight: 400; font-size: 18px;"></i></span>
      </div>
    </div>
    <div class="project-wrapper" ref="scrollcontainer" v-infinite-scroll="loadProjectData" infinite-scroll-disabled="disabledProject" infinite-scroll-immediate="false">
      <div v-for="item in projectList" :key="item.id">
        <div class="task-item" @click="goProjectDetail(item.id)">
          <div v-if="item.taskDeleteStatus !== '4'">
            <span class="arrow-status" :class="'arrow-'+item.taskStatus"></span>
            <span class="task-status" v-if="item.taskStatus === '1'">待完成</span>
            <span class="task-status" v-if="item.taskStatus === '2'">待确认</span>
            <span class="task-status" v-if="item.taskStatus === '3'">已完成</span>
          </div>
          <div v-if="item.taskDeleteStatus === '4'">
            <span class="arrow-status" :class="'arrow-4'"></span>
            <span class="task-status">已归档</span>
          </div>
          <div class="top">
            <div class="logo">
              <img :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/'+item.taskUrl"  style="border-radius: 5px;width: 48px; height: 48px;">
            </div>
            <div class="task-info">
              <p>{{item.taskName}}</p>
              <p class="project"><span>{{item.taskBelongName}}</span></p>
            </div>
          </div>
            <div class="prograss">
              <el-progress :percentage="item.statistics ? item.statistics.completePercent : 0" color="#4495FF"></el-progress>
            </div>
            <div class="bottom">
              <p v-if="item.statistics">任务数：{{item.statistics.totalAmount}}
                <span class="overdue" v-if="item.statistics.overdueAmount > 0">（逾期{{item.statistics.overdueAmount}}）</span>
              </p>
              <p v-else>任务数：0</p>
              <p><i class="el-icon-user"></i>{{item.taskPrincipalName}}</p>
            </div>
        </div>
      </div>
      <img v-if="projectList.length === 0  && !isFirstLoading" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
    </div>
    <div @click="goAddOrUpdateProject" class="add-btn" :class="canCreateProject ? '' : 'forbidden'" :style="{'bottom': bottomBtnPosition}"><i class="el-icon-plus"></i></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      projectList: [],
      moduleInfo: {},
      isFirstLoadingProject: true,
      loadingProject: false,
      pageProject: 1,
      totalPageProject: 1,
    };
  },
  components: {},
  computed : {
    disabledProject () {
      return this.isFirstLoadingProject || this.loadingProject || this.noMoreProject
    },
    noMoreProject () {
      return this.pageProject >= this.totalPageProject;
    },
    canCreateProject() {
      return this.moduleInfo.hasProjectCreateAuthority === '1' && this.moduleInfo.plateStatus === '2'
    }
  },
  mounted () {
    let id = this.$route.params.moduleId || localStorage.getItem("moduleId");
    if (id) this.init(id);
    localStorage.setItem("moduleId", null)
  },
  methods: {
    async init(id) {
      this.moduleInfo = await this.$httpN.postB('division/plate/info', {id, id})
      this.getProjectList(true)
    },
    async addOrEditPlate(id) {
      localStorage.setItem("moduleId", id)
      this.$router.push({ name: 'mlivolobim-addOrUpdateModule', params: {moduleId: id}});
    },
    loadProjectData() {
      this.loadingProject = true;
      this.pageProject ++;
      this.getProjectList();
    },
    //获取版块下的下项目
    async getProjectList(init) {
      if(init) {
        this.pageProject = 1;
        this.projectList = [];
        this.isFirstLoadingProject = true;
      }
      let {list, totalCount, totalPage} = await this.$httpN.postB('division/task/projectList', {
        searchType: 7,
        taskBelongId: this.moduleInfo.id,
        limit: this.limit,
        page: this.pageProject
      })
      this.projectIds = list.map(item => {
        return item.id
      })

      this.loadingProject = false;
      this.projectList.push(...list);
      await this.getAllStatistics(this.curModuleId, this.projectIds.join(','));

      if(init) {
        this.totalPageProject = totalPage;
        this.$nextTick(() => {
          this.isFirstLoadingProject = false;
        })
      }
    },
    async getAllStatistics(plateIds, projectIds) {
      await this.$httpN.postB('division/statistics/statisticsByCustomize', {plateIds: plateIds, projectIds: projectIds}).then(res => {
        var $this = this;
        this.projectIds.map(function(val,index) {
          let a = 0;
          res.map(function(val2) {
            if(val === val2.projectId) {
              $this.$set($this.projectList[$this.limit*($this.page-1)+index], 'statistics', val2);
              a++;
            }
          })
          if(a === 0) $this.$set($this.projectList[$this.limit*($this.page-1)+index], 'statistics', {completePercent: 100,totalAmount: 0,overdueAmount: 0});
        });
      })
    },
    goAddOrUpdateProject() {
      if (!canCreateProject) return;
      localStorage.setItem("moduleId", this.moduleInfo.id)
      this.$router.push({ name: 'mlivolobim-addOrUpdateProject', params: {plateId: this.moduleInfo.id, plateName: this.moduleInfo.plateName, hasProjectCreateAuthority: this.moduleInfo.hasProjectCreateAuthority}});
    },
    goProjectDetail(projectId) {
      localStorage.setItem("moduleId", this.moduleInfo.id)
      this.$router.push({ name: 'mlivolobim-projectDetail', params: {projectId: projectId}});
    }
  }
}
</script>

<style lang='scss' scoped>
.module-detail-page {
  height: 100vh;
  overflow: hidden;
  .tool-bar {
    background-color: #FFF;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #ECECEC;
    .menu-list {
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      align-content: flex-start;
      .menu-item {
        padding: 0 20px;
        border-radius: 20px;
        text-align: center;
      }
    }
  }
  .project-wrapper {
    height: calc(100vh - 46px);
    overflow: auto;
    .task-item{
      width: calc(100% - 40px);
      margin: 20px;
      background-color: #FFF;
      border-radius: 5px;
      box-shadow: 0px 0px 1px rgb(221, 221, 221);
      border: 1px solid #D3E3E8;
      padding: 20px 30px;
      cursor: pointer;
      position: relative;
      .arrow-status{
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 30px #4495FF;
        border-left:solid 30px #4495FF ;
        border-bottom:solid 30px transparent;
        border-right:solid 30px transparent;
        &.arrow-1{
          border-top:solid 30px #4495FF;
          border-left:solid 30px #4495FF ;
        }
        &.arrow-2{
          border-top:solid 30px #E6A23C;
          border-left:solid 30px #E6A23C ;
        }
        &.arrow-3{
          border-top:solid 30px #B0C7CD;
          border-left:solid 30px #B0C7CD ;
        }
        &.arrow-4{
          border-top:solid 30px #909399;
          border-left:solid 30px #909399 ;
        }
      }
      .task-status{
        position: absolute;
        width: 60px;
        line-height: 20px;
        left: -6px;
        top: 11px;
        color: white;
        font-size: 12px;
        transform: rotate(-45deg);
        text-align: center;
        font-weight: normal;
      }
      &::after{
        content: '';
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 15px white;
        border-left:solid 15px white ;
        border-bottom:solid 15px transparent;
        border-right:solid 15px transparent;
      }
      .top{
        display:flex;
        margin-bottom: 10px;
        .logo{
          width: 48px;
          height: 48px;
          text-align: center;
          background: #E6A23C;
          border-radius: 4px;
          i{
            line-height: 48px;
            font-size: 30px;
            color: #FFF;
          }
        }
        .task-info{
          p{
            margin: 0;
            padding-left:10px;
          }
          .project{
            margin-top: 15px;
            span{
              background: #FFDCDC;
              color: #FF5050;
              padding: 2px 6px;
              border-radius: 3px;
            }
          }
        }
      }
      .bottom{
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-content: flex-start;
        p{
          margin: 5px 0 0 0 ;
          color: #79828C;
          i{
            margin-right: 5px;
          }
        }
        .overdue {
          color: #FF5050;
        }
      }
    }
  }
  .add-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 4px 4px 4px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
  }
  .forbidden {
    background-color: #909399;
    background-image: none;
  }
}
</style>